<template>
	<div class="formation-container">
		<!-- 顶部导航 -->
		<div class="header">
			<div class="back-btn" @click="goBack">
				<text>← 返回</text>
			</div>
			<text class="title">阵型布置</text>
			<div class="save-btn" @click="saveFormation">
				<text>保存</text>
			</div>
		</div>

		<!-- 战力显示 -->
		<div class="power-display">
			<text class="power-label">总战力:</text>
			<text class="power-value">{{ totalPower }}</text>
		</div>

		<!-- 阵型图 -->
		<div class="formation-grid">
			<!-- 前排 -->
			<div class="formation-row front-row">
				<text class="row-label">前排</text>
				<div class="position-slots">
					<div class="position-slot"
							:class="{ occupied: formation.front1 }"
							draggable="true"
							@dragstart="onDragStart('front1')"
							@dragover.prevent="onDragOver"
							@drop="onDrop('front1')"
							@click="selectPosition('front1')">
						<div class="slot-content" v-if="formation.front1">
							<image class="partner-avatar" src="/static/default-avatar.svg" mode="aspectFit"></image>
							<div class="quality-border"></div>
							<text class="partner-name" :class="getQualityClass(formation.front1.pev)">{{ formation.front1.name }}</text>
							<text class="partner-stats">HP: {{ formation.front1.hp }} · DMG: {{ formation.front1.base_damage }}</text>
						</div>
						<div class="empty-slot" v-else>
							<text class="slot-icon">+</text>
							<text class="slot-text">前排左</text>
						</div>
					</div>

					<div class="position-slot"
							:class="{ occupied: formation.front2 }"
							draggable="true"
							@dragstart="onDragStart('front2')"
							@dragover.prevent="onDragOver"
							@drop="onDrop('front2')"
							@click="selectPosition('front2')">
						<div class="slot-content" v-if="formation.front2">
							<image class="partner-avatar" src="/static/default-avatar.svg" mode="aspectFit"></image>
							<div class="quality-border"></div>
							<text class="partner-name" :class="getQualityClass(formation.front2.pev)">{{ formation.front2.name }}</text>
							<text class="partner-stats">HP: {{ formation.front2.hp }} · DMG: {{ formation.front2.base_damage }}</text>
						</div>
						<div class="empty-slot" v-else>
							<text class="slot-icon">+</text>
							<text class="slot-text">前排中</text>
						</div>
					</div>

					<!-- 新增：前排第三位置 -->
					<div class="position-slot"
							:class="{ occupied: formation.front3 }"
							draggable="true"
							@dragstart="onDragStart('front3')"
							@dragover.prevent="onDragOver"
							@drop="onDrop('front3')"
							@click="selectPosition('front3')">
						<div class="slot-content" v-if="formation.front3">
							<image class="partner-avatar" src="/static/default-avatar.svg" mode="aspectFit"></image>
							<div class="quality-border"></div>
							<text class="partner-name" :class="getQualityClass(formation.front3.pev)">{{ formation.front3.name }}</text>
							<text class="partner-stats">HP: {{ formation.front3.hp }} · DMG: {{ formation.front3.base_damage }}</text>
						</div>
						<div class="empty-slot" v-else>
							<text class="slot-icon">+</text>
							<text class="slot-text">前排右</text>
						</div>
					</div>
				</div>
			</div>


			<!-- 后排 -->
			<div class="formation-row back-row">
				<text class="row-label">后排</text>
				<div class="position-slots">
					<div class="position-slot"
							:class="{ occupied: formation.back1 }"
							draggable="true"
							@dragstart="onDragStart('back1')"
							@dragover.prevent="onDragOver"
							@drop="onDrop('back1')"
							@click="selectPosition('back1')">
						<div class="slot-content" v-if="formation.back1">
							<image class="partner-avatar" src="/static/default-avatar.svg" mode="aspectFit"></image>
							<div class="quality-border"></div>
							<text class="partner-name" :class="getQualityClass(formation.back1.pev)">{{ formation.back1.name }}</text>
							<text class="partner-stats">HP: {{ formation.back1.hp }} · DMG: {{ formation.back1.base_damage }}</text>
						</div>
						<div class="empty-slot" v-else>
							<text class="slot-icon">+</text>
							<text class="slot-text">后排左</text>
						</div>
					</div>

					<div class="position-slot"
							:class="{ occupied: formation.back2 }"
							draggable="true"
							@dragstart="onDragStart('back2')"
							@dragover.prevent="onDragOver"
							@drop="onDrop('back2')"
							@click="selectPosition('back2')">
						<div class="slot-content" v-if="formation.back2">
							<image class="partner-avatar" src="/static/default-avatar.svg" mode="aspectFit"></image>
							<div class="quality-border"></div>
							<text class="partner-name" :class="getQualityClass(formation.back2.pev)">{{ formation.back2.name }}</text>
							<text class="partner-stats">HP: {{ formation.back2.hp }} · DMG: {{ formation.back2.base_damage }}</text>
						</div>
						<div class="empty-slot" v-else>
							<text class="slot-icon">+</text>
							<text class="slot-text">后排中</text>
						</div>
					</div>

					<!-- 新增：后排第三位置 -->
					<div class="position-slot"
							:class="{ occupied: formation.back3 }"
							draggable="true"
							@dragstart="onDragStart('back3')"
							@dragover.prevent="onDragOver"
							@drop="onDrop('back3')"
							@click="selectPosition('back3')">
						<div class="slot-content" v-if="formation.back3">
							<image class="partner-avatar" src="/static/default-avatar.svg" mode="aspectFit"></image>
							<div class="quality-border"></div>
							<text class="partner-name" :class="getQualityClass(formation.back3.pev)">{{ formation.back3.name }}</text>
							<text class="partner-stats">HP: {{ formation.back3.hp }} · DMG: {{ formation.back3.base_damage }}</text>
						</div>
						<div class="empty-slot" v-else>
							<text class="slot-icon">+</text>
							<text class="slot-text">后排右</text>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 羁绊效果 -->
		<div class="bonds-section" v-if="formation.bonds && formation.bonds.length > 0">
			<div class="section-title">
				<text>羁绊效果</text>
			</div>
			<div class="bonds-list">
				<div class="bond-item" 
					  v-for="bond in formation.bonds" 
					  :key="bond.name"
					  :class="{ active: bond.is_active }">
					<div class="bond-header">
						<text class="bond-name">{{ bond.name }}</text>
						<text class="bond-status">{{ bond.is_active ? '已激活' : '未激活' }}</text>
					</div>
					<text class="bond-desc">{{ bond.description }}</text>
					<text class="bond-effect">{{ bond.effect }}</text>
				</div>
			</div>
		</div>

		<!-- 伙伴选择弹窗 -->
		<div class="partner-modal" v-if="showPartnerModal" @click="closePartnerModal">
			<div class="modal-content" @click.stop>
				<div class="modal-header">
					<text class="modal-title">选择伙伴</text>
					<div class="close-btn" @click="closePartnerModal">
						<text>×</text>
					</div>
				</div>
				<!-- 参考伙伴列表页的卡片网格风格 -->
				<div class="partners-grid-wrap">
					<div class="partner-grid">
						<div class="partner-card"
							 :class="'card-' + (partner.quality || mapQualityToString(partner.pev))"
							 v-for="partner in availablePartners"
							 :key="partner.id || partner.partner_id"
							 @click="selectPartner(partner)">
							<div class="partner-avatar">
								<image class="avatar-img" :src="getAvatarUrl(partner.avatar)" mode="aspectFit"></image>
								<div class="quality-border" :class="'quality-' + (partner.quality || mapQualityToString(partner.pev))"></div>
								<div class="star-rating">
									<text class="star" v-for="n in (partner.star || 0)" :key="n">★</text>
								</div>
							</div>
							<div class="partner-name">{{ partner.name }}</div>
							<div class="partner-stats">
								<span class="stat-label">Lv.</span>{{ partner.level || 1 }} · {{ getTypeText(partner.type) }}
							</div>
							<div class="status-indicator" :class="{ active: isPartnerInFormation(partner) }">
								{{ isPartnerInFormation(partner) ? '已上阵' : '未上阵' }}
							</div>
						</div>
					</div>
					<!-- 移除当前选择位置的伙伴（保留操作入口） -->
					<div class="partner-card remove-card" @click="removePartner">
						<div class="action-icon">🗑️</div>
						<div class="action-text">
							<div class="action-title">移除伙伴</div>
							<div class="action-desc">清空当前卡槽以重新选择</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import api from '@/api'
export default {
	data() {
		return {
			formation: {
				front1: null,
				front2: null,
				front3: null,
				back1: null,
				back2: null,
				back3: null,
				power: 0,
				bonds: []
			},
      availablePartners: [],
      showPartnerModal: false,
      currentPosition: '',
      loading: false,
      activeTeamId: 1,
      draggingPos: ''
    }
  },
	computed: {
		totalPower() {
			let power = 0
			if (this.formation.front1) power += this.calculatePower(this.formation.front1)
			if (this.formation.front2) power += this.calculatePower(this.formation.front2)
			if (this.formation.front3) power += this.calculatePower(this.formation.front3)
			if (this.formation.back1) power += this.calculatePower(this.formation.back1)
			if (this.formation.back2) power += this.calculatePower(this.formation.back2)
			if (this.formation.back3) power += this.calculatePower(this.formation.back3)
			return power
		}
	},
  onLoad() {
    this.loadFormation()
    this.loadAvailablePartners()
  },
	methods: {
		async loadFormation() {
      try {
        const res = await api.sect.getPartnerTeamList()
        if (res && res.code === 1 && res.data && Array.isArray(res.data.team)) {
          const team = res.data.team.find(t => t.team_id === this.activeTeamId) || res.data.team[0]
          this.mapTeamToFormation(team)
        }
      } catch (error) {
        console.error('加载阵容失败:', error)
        if (typeof uni !== 'undefined') {
          uni.showToast({ title: '网络错误', icon: 'none' })
        }
      }
		},
		mapTeamToFormation(team) {
			const members = (team && team.members) || []
			this.formation.front1 = members[0] || null
			this.formation.front2 = members[1] || null
			this.formation.front3 = members[2] || null
			this.formation.back1 = members[3] || null
			this.formation.back2 = members[4] || null
			this.formation.back3 = members[5] || null
		},
		getPartnerIdsFromFormation() {
			const toId = m => {
				if (!m || m.partner_id === 0 || m.partner_id === undefined || m.partner_id === null) return 0
				return m.partner_id
			}
			return [
				toId(this.formation.front1),
				toId(this.formation.front2),
				toId(this.formation.front3),
				toId(this.formation.back1),
				toId(this.formation.back2),
				toId(this.formation.back3)
			]
		},
    async updateTeamOnServer() {
      try {
        const partnerIds = this.getPartnerIdsFromFormation()
        const res = await api.sect.partnerJoinTeam(this.activeTeamId, partnerIds)
        if (res && res.code === 1) {
          // 以服务端回包为准刷新展示，确保实时同步
          const team = res.data.team.find(t => t.team_id === this.activeTeamId) || res.data.team[0]
          this.mapTeamToFormation(team)
          if (typeof uni !== 'undefined') {
            uni.showToast({ title: '阵容已更新', icon: 'success' })
          }
        }
      } catch (error) {
        console.error('更新阵容失败:', error)
        if (typeof uni !== 'undefined') {
          uni.showToast({ title: '更新失败', icon: 'none' })
        }
      }
    },
    onDragStart(posKey) {
      this.draggingPos = posKey
    },
    onDragOver(e) {
      // 允许放置
      if (e && e.preventDefault) e.preventDefault()
    },
    async onDrop(targetPos) {
      if (!this.draggingPos || this.draggingPos === targetPos) return
      const src = this.formation[this.draggingPos]
      const dst = this.formation[targetPos]
      // 交换两个位置
      this.$set(this.formation, this.draggingPos, dst)
      this.$set(this.formation, targetPos, src)
      this.draggingPos = ''
      // 自动同步到后端
      await this.updateTeamOnServer()
    },
    getQualityClass(pev) {
      const map = {
        1: 'pev-1',
        2: 'pev-2',
        3: 'pev-3',
        4: 'pev-4',
        5: 'pev-5'
      }
      return map[pev] || 'pev-1'
    },
    calculatePower(partner) {
      // 兼容后端返回的字段（base_damage, hp, defense, speed）
      if (!partner) return 0
      const baseDamage = (partner.base_damage != null) ? partner.base_damage : ((partner.attributes && (partner.attributes.baseDamage || partner.attributes.attack)) || 0)
      const defense = (partner.defense != null) ? partner.defense : ((partner.attributes && partner.attributes.defense) || 0)
      const health = (partner.hp != null) ? partner.hp : ((partner.attributes && partner.attributes.health) || 0)
      const speed = (partner.speed != null) ? partner.speed : ((partner.attributes && partner.attributes.speed) || 0)
      const star = partner.star || 0
      return Math.floor((baseDamage * 2 + defense + health * 0.5 + speed) * (1 + star * 0.1))
    },
    // 新增：加载可选伙伴列表
    async loadAvailablePartners() {
      try {
        // 打开弹框或页面加载时刷新伙伴列表（不按名称搜索）
        const res = await api.sect.getPartnerList(0)
        if (res && res.code === 1) {
          const raw = res?.data?.partners || res?.data?.list || res?.data || []
          // 归一化结构，兼容不同返回字段
          this.availablePartners = (Array.isArray(raw) ? raw : []).map(p => {
            const id = p.partner_id ?? p.id
            const name = p.name ?? p.n ?? '未知'
            const level = p.level ?? p.lv ?? 1
            const star = p.star ?? p.s ?? 0
            const type = p.type ?? p.t ?? 'damage'
            const avatar = p.avatar ?? p.a ?? 'default-avatar.svg'
            const qualityStr = (p.quality ?? p.q) ?? this.mapQualityToString(p.pev)
            const pev = typeof p.pev === 'number' ? p.pev : this.getQualityNumber(qualityStr)
            return { id, partner_id: id, name, level, star, type, avatar, quality: qualityStr, pev }
          })
        }
      } catch (e) {
        console.error('加载伙伴列表失败:', e)
      }
    },
    // 新增：点击位置选择伙伴
    selectPosition(posKey) {
      this.currentPosition = posKey
      // 打开弹框前刷新列表
      this.loadAvailablePartners()
      this.showPartnerModal = true
    },
    // 新增：关闭伙伴弹窗
    closePartnerModal() {
      this.showPartnerModal = false
      this.currentPosition = ''
    },
    // 新增：选择伙伴并填充到阵容
    selectPartner(p) {
      if (!this.currentPosition) return
      const qualityStr = p.quality || p.q
      const qualityNumMap = { white: 1, green: 2, blue: 3, purple: 4, orange: 5, red: 5 }
      const pev = typeof p.pev === 'number' ? p.pev : (qualityNumMap[qualityStr] || 1)
      const member = {
        partner_id: p.partner_id || p.id || 0,
        name: p.name || p.n || '未知',
        pev,
        hp: p.hp ?? (p.attributes?.health ?? 0),
        base_damage: p.base_damage ?? (p.attributes?.baseDamage ?? p.attributes?.attack ?? 0),
        defense: p.defense ?? (p.attributes?.defense ?? 0),
        speed: p.speed ?? (p.attributes?.speed ?? 0)
      }
      this.$set(this.formation, this.currentPosition, member)
      this.closePartnerModal()
      // 立即同步保存
      this.updateTeamOnServer()
    },
    // 新增：移除当前选择位置的伙伴
    removePartner() {
      if (!this.currentPosition) return
      this.$set(this.formation, this.currentPosition, null)
      this.closePartnerModal()
      this.updateTeamOnServer()
    },
    // 新增：保存按钮行为（与后端同步）
    async saveFormation() {
      await this.updateTeamOnServer()
    },
    // 新增：返回按钮
    goBack() {
      if (typeof uni !== 'undefined') {
        uni.navigateBack()
      } else if (typeof window !== 'undefined') {
        window.history.back()
      }
    },
    // 参考伙伴列表页：头像URL
    getAvatarUrl(avatar) {
      if (!avatar) return '/static/default-avatar.svg'
      if (typeof avatar === 'string' && avatar.includes('.') && !avatar.includes('/')) {
        return `/static/${avatar}`
      }
      return `/static/avatars/${avatar}`
    },
    // 参考伙伴列表页：类型显示
    getTypeText(type) {
      const typeMap = { tank: '坦克', damage: '输出', healer: '治疗', control: '控制' }
      return typeMap[type] || type
    },
    // 品质数值映射
    getQualityNumber(quality) {
      const map = { white: 1, green: 2, blue: 3, purple: 4, orange: 5, red: 6 }
      return map[quality] || 1
    },
    // 数值转品质字符串
    mapQualityToString(pev) {
      const map = { 1: 'white', 2: 'green', 3: 'blue', 4: 'purple', 5: 'orange', 6: 'red' }
      return map[pev] || 'white'
    },
    // 是否已在当前阵容中
    isPartnerInFormation(p) {
      const id = p.partner_id ?? p.id
      const ids = this.getPartnerIdsFromFormation()
      return ids.includes(id)
    }
  }
}
</script>

<style scoped>
/* 品阶颜色（根据pev） */
.partner-name.pev-1 { color: #c0c4cc; }
.partner-name.pev-2 { color: #52c41a; }
.partner-name.pev-3 { color: #1890ff; }
.partner-name.pev-4 { color: #722ed1; }
.partner-name.pev-5 { color: #fa8c16; }
</style>

<style scoped>
/* ========== 武侠风格阵容页面 ========== */
.formation-container {
	padding: 0;
	background: linear-gradient(180deg, #e8dcc4 0%, #d4c4a8 100%);
	min-height: 100vh;
	font-family: "STSong", "Noto Serif SC", serif;
}

/* 顶部导航 */
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 40rpx;
	background: rgba(255, 255, 255, 0.95);
	border-bottom: 3px solid #c4a57b;
	box-shadow: 0 3px 10px rgba(139, 111, 71, 0.2);
}

.back-btn, .save-btn {
	font-size: 28rpx;
	padding: 16rpx 32rpx;
	border-radius: 25rpx;
	background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
	border: 2px solid #4b3a2a;
	color: white;
	transition: all 0.3s ease;
	font-weight: 600;
}

.back-btn:active, .save-btn:active {
	transform: scale(0.95);
	box-shadow: 0 2px 8px rgba(75, 58, 42, 0.3);
}

.title {
	font-size: 36rpx;
	font-weight: 700;
	color: #4a3c2a;
	letter-spacing: 2px;
	text-shadow: 0 1px 2px rgba(139, 111, 71, 0.2);
}

/* 战力显示 - 武侠风格 */
.power-display {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 30rpx 30rpx;
	padding: 30rpx;
	background: rgba(255, 255, 255, 0.95);
	border: 3px solid #d4af37;
	border-radius: 20rpx;
	box-shadow: 0 8px 32rpx rgba(212, 175, 55, 0.3);
}

.power-label {
	font-size: 32rpx;
	color: #4a3c2a;
	margin-right: 20rpx;
	font-weight: 600;
}

.power-value {
	font-size: 42rpx;
	font-weight: 700;
	color: #d4af37;
	text-shadow: 0 2px 4px rgba(212, 175, 55, 0.3);
}

/* 阵型网格 */
.formation-grid {
	margin: 0 30rpx 30rpx;
}

.formation-row {
	margin-bottom: 40rpx;
}

.row-label {
	font-size: 30rpx;
	font-weight: 700;
	color: #4a3c2a;
	margin-bottom: 20rpx;
	display: block;
	text-align: center;
	letter-spacing: 2px;
	text-shadow: 0 1px 2px rgba(139, 111, 71, 0.2);
}

.position-slots {
	display: flex;
	justify-content: center;
	gap: 30rpx;
}

.position-slots .center {
	margin: 0 auto;
}

/* 位置卡槽 */
.position-slot {
	width: 200rpx;
	height: 260rpx;
	border: 3rpx dashed rgba(255, 255, 255, 0.4);
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
	position: relative;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.position-slot.occupied {
	border: 3rpx solid #52c41a;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 8px 32px rgba(82, 196, 26, 0.3);
}

.position-slot:active {
	transform: scale(0.95);
}

.slot-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 20rpx;
}

.partner-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 15rpx;
	margin-bottom: 15rpx;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.quality-border {
	position: absolute;
	top: 17rpx;
	left: 37rpx;
	width: 126rpx;
	height: 126rpx;
	border: 3rpx solid;
	border-radius: 18rpx;
	pointer-events: none;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.quality-border.quality-green { 
	border-color: #52c41a; 
	box-shadow: 0 0 15px rgba(82, 196, 26, 0.5);
}
.quality-border.quality-blue { 
	border-color: #1890ff; 
	box-shadow: 0 0 15px rgba(24, 144, 255, 0.5);
}
.quality-border.quality-purple { 
	border-color: #722ed1; 
	box-shadow: 0 0 15px rgba(114, 46, 209, 0.5);
}
.quality-border.quality-orange { 
	border-color: #fa8c16; 
	box-shadow: 0 0 15px rgba(250, 140, 22, 0.5);
}

.partner-name {
	font-size: 24rpx;
	font-weight: 600;
	color: #333;
	text-align: center;
}

.empty-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.slot-icon {
	font-size: 60rpx;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 15rpx;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.slot-text {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.8);
	font-weight: 500;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 羁绊效果 */
.bonds-section {
	margin: 0 30rpx 30rpx;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
}

.section-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 25rpx;
	padding-bottom: 15rpx;
	border-bottom: 2rpx solid #f0f0f0;
}

.bonds-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.bond-item {
	padding: 25rpx;
	border-radius: 15rpx;
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	border-left: 4rpx solid #dee2e6;
	transition: all 0.3s ease;
}

.bond-item.active {
	background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
	border-left-color: #1890ff;
	box-shadow: 0 4px 16px rgba(24, 144, 255, 0.2);
}

.bond-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15rpx;
}

.bond-name {
	font-size: 28rpx;
	font-weight: 600;
	color: #333;
}

.bond-status {
	font-size: 22rpx;
	padding: 6rpx 16rpx;
	border-radius: 15rpx;
	background-color: #f0f0f0;
	color: #999;
	font-weight: 500;
}

.bond-item.active .bond-status {
	background-color: #1890ff;
	color: white;
}

.bond-desc {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 10rpx;
	display: block;
	line-height: 1.4;
}

.bond-effect {
	font-size: 26rpx;
	font-weight: 600;
	color: #fa8c16;
}

/* 伙伴选择弹窗 */
.partner-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	backdrop-filter: blur(5px);
}

.modal-content {
	width: 90%;
	max-height: 80%;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 25rpx;
	padding: 40rpx;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(20px);
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
	padding-bottom: 20rpx;
	border-bottom: 2rpx solid #f0f0f0;
}

.modal-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
}

.close-btn {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 40rpx;
	color: #666;
	transition: all 0.3s ease;
}

.close-btn:active {
	transform: scale(0.9);
	background: linear-gradient(135deg, #e0e0e0 0%, #d0d0d0 100%);
}

/* 参考伙伴列表页的卡片风格 */
.partners-grid-wrap {
    max-height: 500rpx;
    overflow-y: auto;
}

.partner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24rpx;
    margin-bottom: 20rpx;
}

.partner-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10rpx);
    border-radius: 20rpx;
    padding: 20rpx;
    text-align: center;
    box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 2rpx solid rgba(255, 255, 255, 0.6);
}

.partner-card:active {
    transform: translateY(-4rpx);
    box-shadow: 0 10rpx 28rpx rgba(0, 0, 0, 0.15);
}

.partner-avatar {
    position: relative;
    width: 120rpx;
    height: 120rpx;
    margin: 0 auto 12rpx;
}

.avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
}

.quality-border {
    position: absolute;
    top: -5rpx;
    left: -5rpx;
    right: -5rpx;
    bottom: -5rpx;
    border: 6rpx solid;
    border-radius: 15rpx;
    pointer-events: none;
}

.quality-border.quality-green { border-color: #52c41a; }
.quality-border.quality-blue { border-color: #1890ff; }
.quality-border.quality-purple { border-color: #722ed1; }
.quality-border.quality-orange { border-color: #fa8c16; }
.quality-border.quality-red { border-color: #ff4d4f; }

.partner-card.card-white { border-color: rgba(255,255,255,0.8); }
.partner-card.card-green { border-color: #52c41a; box-shadow: 0 6rpx 20rpx rgba(82,196,26,0.25); }
.partner-card.card-blue { border-color: #1890ff; box-shadow: 0 6rpx 20rpx rgba(24,144,255,0.25); }
.partner-card.card-purple { border-color: #722ed1; box-shadow: 0 6rpx 20rpx rgba(114,46,209,0.25); }
.partner-card.card-orange { border-color: #fa8c16; box-shadow: 0 6rpx 20rpx rgba(250,140,22,0.25); }
.partner-card.card-red { border-color: #ff4d4f; box-shadow: 0 6rpx 20rpx rgba(255,77,79,0.25); }

.star-rating {
    position: absolute;
    bottom: -10rpx;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

.star { color: #ffd700; font-size: 20rpx; text-shadow: 1rpx 1rpx 2rpx rgba(0,0,0,0.3); }

.partner-name { font-size: 28rpx; font-weight: bold; margin-bottom: 10rpx; }

.partner-stats { font-size: 24rpx; color: #333; font-weight: 600; margin-bottom: 10rpx; background: rgba(102,126,234,0.08); border-radius: 12rpx; padding: 6rpx 10rpx; }
.stat-label { color: #222; font-weight: 700; }

.status-indicator { padding: 6rpx 12rpx; border-radius: 15rpx; font-size: 22rpx; background-color: #f0f0f0; color: #999; display: inline-block; }
.status-indicator.active { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); color: #333; }

.remove-card { display: flex; align-items: center; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10rpx); padding: 20rpx; border-radius: 20rpx; box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1); border: 1rpx solid rgba(255, 255, 255, 0.3); transition: all 0.3s ease; margin-top: 10rpx; }
.remove-card:active { transform: translateY(-4rpx); box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15); }
.action-icon { font-size: 40rpx; margin-right: 16rpx; }
.action-title { font-size: 28rpx; font-weight: bold; color: #333; margin-bottom: 6rpx; }
.action-desc { font-size: 24rpx; color: #666; }

/* 响应式设计 */
@media screen and (max-width: 750px) {
	.partner-grid { grid-template-columns: repeat(3, 1fr); gap: 15rpx; }
	.position-slot {
		width: 180rpx;
		height: 240rpx;
	}
	
	.partner-avatar {
		width: 100rpx;
		height: 100rpx;
	}
	
	.quality-border {
		top: 17rpx;
		left: 37rpx;
		width: 106rpx;
		height: 106rpx;
	}
	
	.position-slots {
		gap: 20rpx;
	}
}

@media screen and (max-width: 600px) {
	.partner-grid { grid-template-columns: repeat(2, 1fr); }
	.formation-container {
		padding: 0;
	}
	
	.header {
		padding: 25rpx 30rpx;
	}
	
	.power-display, .bonds-section {
		margin: 20rpx;
	}
	
	.formation-grid {
		margin: 0 20rpx 20rpx;
	}
}
</style>